<template>
  <el-form class="add-event-user">
    <div v-if="(events.reposts || events.user)" class="margin-left-right-16 margin-bottom-10">
      <p class="margin-bottom-10">选择需要显示的内容</p>
      <el-checkbox-group v-model="dataKeys">
        <el-checkbox v-for="(label, index) in USER_KEYS" :key="index" :label="label" ></el-checkbox>
      </el-checkbox-group>
    </div>
    <!-- <input-normal label="触发关联id" v-model="wbData.relateCompId" @change="onUpdateWbComponent"></input-normal> -->
    <input-normal label="用户前缀" v-model="wbData.namePrefix" @change="onUpdateWbComponent"></input-normal>
    <switch-normal v-if="componentData && commonAttr.hasOwnProperty('isCustomText')" label="显示自定义的本文" v-model="commonAttr.isCustomText" @change="onChangeAttr"></switch-normal>
    <input-normal v-if="componentData && commonAttr.isCustomText" label="自定义的本文前缀" v-model="commonAttr.textPrefix" @change="onChangeAttr"></input-normal>
    
    <switch-normal label="按照索引关注" v-model="wbData.isFollowByIndex" @change="onUpdateWbComponent"></switch-normal>
    <textarea-normal label="配置获取用户数据规则" placeholder="{'random':true,length:5}" v-model="wbData.customParams"  @change="onUpdateWbComponent"></textarea-normal>
    <el-button type="primary" @click.stop="onAddWbItem" class="margin-bottom-10 margin-left-right-16"><el-icon><i class="jy-icon-plus"></i></el-icon>增加内容</el-button>
      <el-collapse v-model="activeNames">
        <el-collapse-item v-for="(item, index) in eventWbLists" :name="index+1" :key="index">
            <template #title>
            用户{{index+1}}<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteWbItem($event, index)"></i>
          </template>
          <input-normal label="用户uid" v-model="item.uid" @change="onUpdateWbItem(index)"></input-normal>
          <add-img-con :url="item.frontPicUrl" picAttr="frontPicUrl" :index="index" :event="event" :isCrop='false' :height="100" class="margin-left-right-16"></add-img-con>
          <input-normal label="跳转链接" v-model="item.jumpLink" @change="onUpdateWbItem(index)"></input-normal>
        </el-collapse-item>
      </el-collapse>
  </el-form>
</template>

<script>
  import InputNormal from '@/views/components/edit/InputNormal.vue'
  import TextareaNormal from '@/views/components/edit/TextareaNormal.vue'
  import AddImgCon from '@/views/components/add-img-con.vue'
  import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'

  import { addUtils } from '@/views/js/add-utils'
  import { editUtils } from '@/views/js/edit-utils'
  import { dataUtils } from '@/views/js/data-utils'

  import { COMMON_ITEM_TYPE_MAP } from '@/const/'

  import { USER_KEYS } from '@/common/data-drive-ui'


  export default {
    mixins: [addUtils, editUtils, dataUtils],
    setup () {
      return {
        COMMON_ITEM_TYPE_MAP: COMMON_ITEM_TYPE_MAP,
        USER_KEYS: USER_KEYS,
      }
    },
    components: {
      InputNormal,
      AddImgCon,
      SwitchNormal,
      TextareaNormal,
    },
  }
</script>